// 新建标签
<template>
  <div class="add_label">
    <el-button type="primary" @click="onOpneLabel" v-hasPermi="['system:filesUserLabel:add']">
      <i class="el-icon-delete"></i>
      <span class="create_text">标签管理</span>
    </el-button>
    <!-- 标签列表 -->
    <el-dialog title="标签管理" v-model="dialogVisible" width="700px" :before-close="handleClose" :destroy-on-close="false" style="height: 700px">
      <div class="lable_table">
        <div class="lable_table_add">
          <el-button type="primary" @click="addTagsDialogClick">添加标签</el-button>
        </div>
        <div class="lable_table_list">
          <el-table
            :data="labelList"
            style="width: 100%"
            row-key="id"
            border
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            height="100%"
          >
            <el-table-column label="标签名称" prop="labelName"></el-table-column>
            <el-table-column label="标签图标" prop="labelName">
              <template #default="scope">
                <svg-icon :icon-class="scope.row.icon" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button type="primary" :icon="Edit" @click="OpenEditTagsDialogClick('edit', scope.row)" v-hasPermi="['system:filesUserLabel:edit']"></el-button>
                <el-button type="danger" :icon="Delete" @click="deleteTagsDialogClick(scope.row)" v-hasPermi="['system:filesUserLabel:del']"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <!-- 添加or编辑标签弹窗 -->
    <el-dialog
      :title="form.id ? '编辑标签' : '添加标签'"
      v-model="editDialogVisible"
      width="500px"
      :before-close="handleEditClose"
      :destroy-on-close="false"
    >
      <div class="add_label_form">
        <el-form ref="menuFormRef" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="标签图标" prop="labelIcon">
                <!-- 图标选择器 -->
                <icon-select v-model="form.icon" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="标签名称" prop="labelName">
                <el-input v-model="form.labelName" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上级目录" prop="parentId">
                <el-tree-select
                  v-model="form.parentId"
                  :data="menuOptions"
                  :props="{ value: 'id', label: 'labelName', children: 'children' }"
                  value-key="menuId"
                  placeholder="选择上级菜单"
                  check-strictly
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上级目录" prop="sort">
                <el-input-number v-model="form.sort" :min="1" :max="99" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleEditClose">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
     
<script setup lang='ts'>
import { Delete, Edit } from '@element-plus/icons-vue';
import { ref, defineProps } from 'vue';
import {
  apiFilesUserLabelQuerySys,
  apiFilesUserLabelCreateSys,
  apiFilesUserLabelDeleteSys,
  apiFilesUserLabelGetId,
  apiFilesUserLabelUpdateSys
} from '@/api/enterpriseDoc/labelDocumentApi';
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
  rowData: {
    type: Object,
    default: () => {}
  }
});
const dialogVisible = ref<boolean>(false); // 弹窗是否可见
const handleClose = () => {
  dialogVisible.value = false;
}; // 弹窗关闭事件
// 打开标签管理弹窗
const onOpneLabel = () => {
  dialogVisible.value = true;
  getLabelList();
};
//////////////////////////////////////////////   列表相关操作 start   //////////
const labelList = ref<any[]>([]); // 标签列表
// 获取标签列表
const getLabelList = async () => {
  let params = {
    sortAsc: 'sort',
    libraryId: props.rowData.id
  };
  let res: any = await apiFilesUserLabelQuerySys(params);
  if (res.code == 200) {
    labelList.value = res.data;
  }
};
// 修改标签
const OpenEditTagsDialogClick = async (type: string, row: any) => {
  editDialogVisible.value = true;
  getMenuList();
  let res: any = await apiFilesUserLabelGetId(row.id);
  if (res.code == 200) {
    form.labelName = res.data.labelName;
    form.icon = res.data.icon;
    form.parentId = res.data.parentId;
    form.sort = res.data.sort;
    form.id = row.id;
  }
};
// 删除标签
const deleteTagsDialogClick = (row: any) => {
  ElMessageBox.confirm('确认删除标签吗？', '提示', { type: 'warning' }).then(async () => {
    let res: any = await apiFilesUserLabelDeleteSys([row.id]);
    if (res.code == 200) {
      proxy?.$modal.msgSuccess('删除成功 !');
      getLabelList();
    }
  });
};
// 添加标签
const addTagsDialogClick = () => {
  editDialogVisible.value = true;
  getMenuList();
};
//////////////////////////////////////////////   列表相关操作 end   //////////

/////////////////////  添加or编辑标签弹窗相关操作 start  ////////////////
const menuFormRef = ref<any>(); // 表单ref
const editDialogVisible = ref<boolean>(false); // 弹窗是否可见
const emit = defineEmits(['onRefresh']); // 触发父组件更新
const handleEditClose = () => {
  menuFormRef.value.resetFields();
  editDialogVisible.value = false;
}; // 弹窗关闭事件
const form = reactive({
  labelName: '',
  icon: '',
  parentId: 0,
  sort: 99,
  id: null
});
const rules = {
  labelName: [
    { required: true, message: '标签名称不能为空', trigger: 'blur' },
    { min: 2, max: 10, message: '标签名称长度在 2 到 10 个字符', trigger: 'blur' }
  ],
  icon: [{ required: true, message: '标签图标不能为空', trigger: 'blur' }]
};
const menuOptions = ref<any[]>([]); // 菜单列表
// 获取菜单列表
const getMenuList = () => {
  menuOptions.value = [];
  const menu = { id: 0, labelName: '主类目', children: [] };
  menu.children = labelList.value;
  menuOptions.value.push(menu);
};
// 保存标签
const handleEditSubmit = () => {
  menuFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      let params = {
        ...form,
        libraryId: props.rowData.id
      };
      if (form.id) {
        let res:any = await apiFilesUserLabelUpdateSys(params);
        if (res.code == 200) {
          proxy?.$modal.msgSuccess('修改成功 !');
          handleEditClose();
          getLabelList();
        }
      }else{
        let res: any = await apiFilesUserLabelCreateSys(params);
        if (res.code == 200) {
          proxy?.$modal.msgSuccess('新增成功 !');
          handleEditClose();
          getLabelList();
        }
      }
      emit('onRefresh');
    }
  });
};
</script>
<style scoped lang='scss'>
:deep(.el-dialog__header) {
  padding-top: 0 !important;
}
:deep(.el-dialog__body) {
  height: 100%;
  .lable_table {
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    .lable_table_add {
      padding-bottom: 15px;
    }
    .lable_table_list {
      flex: 1;
    }
  }
}
</style>